<template>
	<view class="active-details">
		<view class="activity-info" v-if="activityInfo.id">
			<view class="info">
				<view class="user-info">
					<image class="head" :src="headHandle(activityInfo)" @click="utils.userDetails(activityInfo.publisher_account_id, activityInfo.publicUserType)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{activityInfo.publicUserName}}</text>
						<text class="time">{{handleTime(activityInfo.add_time)}}</text>
					</view>
				</view>
				<text @click="editActivity(activityInfo)" style="color: #02A7F0">编辑</text>
			</view>
			<view class="content">
				<view class="cont-title">
					{{activityInfo.title}}
				</view>
				<text class="cont-text">{{activityInfo.content}}</text>
				<view class="time-type">
					<text>活动类型：{{activityInfo.type_name}}</text><br>
					<text>活动截止时间：{{handleTime(activityInfo.end_date)}}</text>
				</view>
			</view>
			<view class="images-box" v-if="activityInfo.dst_imgs">
				<image class="img" v-for="(path, i) in activityInfo.dst_imgs" :key="i" :src="path" @click="previewImage(activityInfo.dst_imgs, i)" mode="aspectFill"></image>
			</view>
		</view>
		<view class="search-box">
			<uni-icons type="search" color="#333" size="40rpx"></uni-icons>
			<input class="input" type="text" :value="searchText" @input="searchInput" placeholder="搜索学生姓名" placeholder-style="color: #999;" confirm-type="search">
			<!-- <uni-icons @click="searchText='';resultList=[]" type="clear" size="40rpx" color="#d7d7d7"></uni-icons> -->
		</view>
		<view class="tips-box">
			<text>已报名：{{ stuTotal }}名学生</text>
			<text>待审核：{{ showStudentMap.waitList?showStudentMap.waitList.length:0 }}名学生</text>
		</view>
		<view class="student-list">
			<view v-for="(list, k) in showStudentMap" :key="k">
				<view class="tk-item" v-for="(item, index) in list" :key="index" @click="activityAudit(item.studentAccountId, k)">
				
					<view class="stu-name">
						<view class="" style="position: relative;margin-right: 20rpx;">
							<view class="head-box">
								<image class="head" :src="utils.headImage(allMembers[item.studentAccountId])" mode="aspectFill"></image>
							</view>
							<i class="dot" v-if="k=='waitList'"></i>
						</view>
						<text class="name">{{item.name}}</text>
					</view>
					<text class="stu-class">{{item.className}}</text>
					<text class="see-details">详情 <uni-icons type="right" color="#02A7F0"></uni-icons></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			allMembers: {}, // 全校师生
			searchText: '', // 搜索的学生姓名
			studentAll: {
				waitList: [], // 待审核的学生列表
				alreadyList: [], // 已审核的学生列表
				onlyEnrollList: [] // 仅报名的学生列表
			},
			showStudentMap: {},
			activityInfo: {},
			stuTotal: 0 // 学生总数
		}
	},
	onLoad(options) {
		this.activityId = options.id
		this.allMembers = uni.getStorageSync('allFindMembers') || {}

		this.getStudent()
		this.getActivityParInfo()
	},
	onShow() {
		if (this.activityId && Object.values(this.showStudentMap).length > 0) {
			this.getStudent()
		}
	},
	methods: {
		searchInput(e) {
			const newObj = {
				waitList: [], // 待审核的学生列表
				onlyEnrollList: [], // 仅报名的学生列表
				alreadyList: [], // 已审核的学生列表
			}
			this.searchText = e.detail.value
			if (!this.searchText) { // 搜索关键字为空显示所有
				this.showStudentMap = Object.assign(this.studentAll)
				this.stuTotal = this.showStudentMap.onlyEnrollList.length + this.showStudentMap.waitList.length + this.showStudentMap.alreadyList.length
				return
			}
			
			// 通过搜索关键字，筛选出学生
			for(const key in this.studentAll) {
				const list = this.studentAll[key]
				const studentInfo = list.find(item => item.name.indexOf(this.searchText) != -1);
				if (studentInfo) {
					newObj[key].push(studentInfo)
				}
			}
			this.showStudentMap = newObj
			this.stuTotal = newObj.onlyEnrollList.length + newObj.waitList.length + newObj.alreadyList.length
			
		},
		// 获取已经报名活动的所有学生列表
		getStudent() {
			this.api.get('activity/getActivityAllStudentList', {
				activityId: this.activityId
			}).then(res => {
				if (res.data.state == 'ok') {
					const data = res.data
					// 已报名的学生总数
					this.stuTotal = data.onlyEnrollList.length + data.waitList.length + data.alreadyList.length
					this.studentAll.onlyEnrollList = data.onlyEnrollList
					this.studentAll.waitList = data.waitList
					this.studentAll.alreadyList = data.alreadyList
					// 页面显示的学生数据
					this.showStudentMap = Object.assign(this.studentAll)
				}
			})
		},
		// 获取活动详情
		getActivityParInfo(){
			this.api.get('activity/getActivityInfo', {
				activityId: this.activityId
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.activityInfo = res.data.activity
		        if(this.activityInfo.files){
					this.handleFilesShow(this.activityInfo.files)
				}
			
			})
		},
		headHandle(info){
			// 处理头像显示
			info.avatarUrl = info.publicUserPic
			let type = info.publicUserType || 1
			info.userType = type
			return this.utils.headImage(info)
		},
		// 获取显示图片的链接
		handleFilesShow(list, index){
			list = JSON.parse(list)
			let imgs = []
			for(let i=0; i<list.length; i++){
				imgs.push(`${this.api.xiaodeObsUrl}${list[i].path}`)
				
			}
			this.$set(this.activityInfo, 'dst_imgs', imgs)
		},
		handleTime(time){
			if(!time) return
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		// 活动审核
		activityAudit(accountId, type){
			if (type == 'waitList') {
				uni.navigateTo({
					url: `/pages/teachers/activity-audit-details?id=${this.activityId}&state=1&stuId=${accountId}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/teachers/participate-in-details?id=${this.activityId}&accountId=${accountId}&state=${type=='onlyEnrollList'?1:2}`
				})
			}
			
		},
		// 图片预览
		previewImage(list, i){
			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
			
		},
		// 编辑活动内容
		editActivity(item) {
			uni.navigateTo({
				url: `/pages/teachers/publish-page?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="less" scoped>
.active-details{
	padding: 0 32rpx;
}
.activity-info{
	padding: 32rpx 0 16rpx;
	background-color: #fff;
}
.info{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.active-type{
	font-size: 28rpx;color: #666666;
}
.user-info{
	display: flex;
	.head{
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}
}
.name-time{
	margin-left: 24rpx;
	.name{
		display: block;
		line-height: 44rpx;
		
	}
	.time{
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #999;
	}
}
.content{
	margin-top: 24rpx;
}
.cont-title{
	color: #333;
	line-height: 40rpx;
	font-weight: 600;
}
.cont-text{
	margin-top: 24rpx;
	display: block;
	color: #666666;
	line-height: 44rpx;
}
.time-type{
	margin-top: 24rpx;
	color: #666;
	line-height: 44rpx;
}
.images-box{
	margin-top: 40rpx;
}
.images-box{
	font-size: 0;
	image{
		width: 215rpx;
		height: 215rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 24rpx;
		&:nth-child(3n){
			margin-right: 0;
		}
	}
}
.search-box{
	padding: 0 20rpx;
	height: 70rpx;
	display: flex;
	align-items: center;
	background: #f2f2f2;
	border-radius: 20rpx;
	.input{
		width: 84%;
		margin: 0 24rpx;
		font-size: 26rpx;
	}
	.cancel{
		white-space: nowrap;
	}
}
.student-list{
	display: flex;
	flex-direction: column;
}
.stu-name{
	width: 52%;
	margin-right: 12rpx;
}
.stu-class, .see-details{
	width: 23%;
	white-space: nowrap;
}
.see-details{
	text-align: center;
	color: #02A7F0;
}
.tk-item{
	display: flex;
	align-items: center;
	padding: 22rpx 0;
	position: relative;
	&::after{
		position: absolute;
		left: 0;
		bottom: 0;
		content: '';
		width: 200%;
		height: 1px;
		background-color: #EEEEEE;
		-webkit-transform: scale(0.5) translateX(-50%);
		transform: scale(0.5) translateX(-50%);
	}
	.stu-name{
		
		display: flex;
		align-items: center;
	}
	.dot{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 20rpx;
		background-color: #f00;
		height: 20rpx;
		border-radius: 10px;
	}
	.head-box{
		position: relative;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		box-sizing: border-box;
		.head{
			border-radius: 50%;
			width: 72rpx;
			height: 72rpx;
		}
	}
}
.tips-box{
	margin: 32rpx 0 10rpx;
	display: flex;
	justify-content: space-evenly;
}
</style>